<template>
  <div ref="pieChart" class="pieChart" />
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'VueAdminTemplateMasterPieChart',

  data() {
    return {

    }
  },

  mounted() {
    var myChart = echarts.init(this.$refs.pieChart, 'dark')
    var option = {
      title: {
        text: '全国订单人数分布图',
        textStyle: {
          color: '#95a3ce',
          fontSize: 20

        },
        left: 20,
        top: 20
      },
      tooltip: {
        backgroundColor: 'rgba(0,0,0,.6)',
        borderColor: 'rgba(0,0,0,.6)',
        textStyle: {
          color: '#fff'
        },
        formatter: '{b}数量:{c}个;占比({d}%)'
      },
      series: [
        {
          name: '购买终端',
          type: 'pie',
          radius: [35, 80],
          center: ['50%', '50%'],
          roseType: 'area',
          itemStyle: {
            borderRadius: 0
          },
          data: [
            { value: 20, name: 'Android',
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0, color: '#6d48dc'
                  }, {
                    offset: 1, color: '#4b4cdc'
                  }],
                  global: false
                }
              }},
            { value: 15, name: 'IOS',
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0, color: '#24c8ff'
                  }, {
                    offset: 1, color: '#2492ff'
                  }],
                  global: false
                }
              }},
            { value: 10, name: 'PC Web',
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0, color: '#d100ff'
                  }, {
                    offset: 1, color: '#bd00ff'
                  }],
                  global: false
                }
              }},
            { value: 5, name: 'Wap Web',
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0, color: '#891d89'
                  }, {
                    offset: 1, color: '#72218f'
                  }],
                  global: false
                }
              }}
          ]
        }
      ]
    }
    myChart.setOption(option)
  },

  methods: {

  }
}
</script>

<style scoped lang="scss">
.pieChart{
    width: 100%;
    height: 100%;
}
</style>
